<template>
  <div class="coupon-box flex-center-wrap flex-justify-between" :class="[bg, couponActive]" @click="active">
    <div class="coupon-left flex-justify-center flex-column-wrap">
      <div class="coupon-title">{{ coupon.cname }}</div>
      <div class="coupon-profession">{{ coupon.category }}</div>
      <div class="coupon-time flex-wrap">
        <span>有效期：</span>
        <div>{{ coupon.use_range | formateLimt }}</div>
      </div>
    </div>
    <div class="coupon-right flex-center flex-column-wrap">
      <div style="font-size: 0">
        <span class="coupon-price">￥</span>
        <span class="coupon-price-count">{{ coupon.coupons }}</span>
      </div>
      <div class="coupon-threshold">{{ coupon.coupons_threshold }}</div>
      <!-- <div class="coupon-btn">去使用</div> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    coupon: {
      type: Object,
      default: () => ({})
    },
    isOver: {
      type: [Number, String],
      default: 1
    },
    index: {
      type: [Number, String],
      default: null
    },
    selectedIndex: {
      type: [Number, String],
      default: null
    }
  },
  computed: {
    bg: function() {
      return this.isOver === 1 ? 'coupon-box-over' : ''
    },
    couponActive() {
      return this.index === this.selectedIndex ? 'coupon-box-active' : ''
    }
  },
  data: function() {
    return {}
  },
  filters: {
    // 有效期 格式处理
    formateLimt: function(str) {
      if (!str) return '-'
      str = str.substr(str.indexOf('-') + 1)
      return str.replace(/\./g, '-')
    }
  },
  methods: {
    active: function() {
      //可用的才有点击选择功能
      if (this.isOver === 0) {
        // 取消选择
        if (this.selectedIndex === this.index) {
          this.$emit('send', null)
        } else {
          this.$emit('send', this.index)
        }
      }
    }
  }
}
</script>

<style scoped>
.coupon-box {
  position: relative;
  background-image: url('//image.zlketang.com/public/news/images/new_official/personal_center/coupons_bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
.coupon-box-active::after {
  content: '';
  display: block;
  background-image: url('//image.zlketang.com/public/news/images/new_official/pay/coupon-active-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 26px;
  position: absolute;
  top: 0;
  right: 0;
}
.coupon-box-over {
  background-image: url('//image.zlketang.com/public/news/images/new_official/personal_center/over_coupons_bg.png');
  background-size: contain;
  cursor: not-allowed;
}
.coupon-left {
  width: 257px;
  height: 160px;
  padding: 8px 10px 8px 30px;
}
.coupon-title {
  font-size: 18px;
  font-weight: bold;
  color: #1a2840;
  line-height: 25px;
}
.coupon-profession {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #667080;
  line-height: 20px;
}
.coupon-time {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #9fa6b3;
  line-height: 17px;
}
.coupon-right {
  width: 132px;
  height: 160px;
  padding: 8px 10px;
}
.coupon-price {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}
.coupon-price-count {
  font-size: 44px;
  font-weight: 600;
  font-weight: 400;
  color: #ffffff;
}
.coupon-threshold {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 20px;
}
.coupon-btn {
  margin-top: 15px;
  width: 64px;
  height: 22px;
  background: #ffffff;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 400;
  color: #ff7e4b;
  line-height: 22px;
  text-align: center;
}
.coupons-box > div:first-of-type {
  margin-top: 0px;
}
.coupons-box > div:nth-of-type(2) {
  margin-top: 0px;
}
.coupons-box > div {
  margin-top: 20px;
}
.coupons-box > div:nth-of-type(2n) {
  margin-left: 30px;
}
</style>
